<template>
	<a-layout-content>
		<view class="main-box">
			<view class="video-content" v-if="showVideo">
				<video v-if="showVideo" :src="adv_video" autoplay="true" style="width: 100%;height: 100%;"></video>
				<uni-icons @click="()=>{showVideo=!showVideo}" class="video-close" type="closeempty" color="#ff4d4f"
					size="32"></uni-icons>
			</view>
			<view class="banner">
				<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<view class="swiper-item">
							<image :src="item.img" mode="scaleToFill"></image>
						</view>
					</swiper-item>
				</swiper>

				<view class="abs-content">
					<uni-row>
						<uni-col>
							<h2 class="title-v1">交规培训加盟</h2>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<image class="title-img" src="@/static/home/title.png"></image>
						</uni-col>
					</uni-row>
					<uni-row style="display: flex;">
						<uni-col :span="7">
							<view class="btn-choose" @click="$topage('/pages/exercise/exercise',{},'close')">VIP学习
							</view>
						</uni-col>
						<uni-col :span="7">
							<view class="btn-choose" style="background-color: #f07e23;color: #fff;" @click="$topage('/pages/article/detail',
								{id:'0ab5303b62b5278c0aebb693108936ba'},'new')">
								我要加盟</view>
						</uni-col>
						<uni-col offset="16" :span="4">
							<image class="playbtn" @click="()=>showVideo=!showVideo" src="@/static/home/playbtn.png">
							</image>
						</uni-col>
					</uni-row>
					<uni-row :gutter="2" style="display: flex;justify-content: space-between;margin-top: 88rpx;">
						<uni-col :span="4" class="item-adv" v-for="(item) in advList" :key="item.id">
							<a-row>
								<a-col span="12" offset="10" style="margin-top: 24rpx;">
									<image :src="'/static/home/'+item.img"></image>
								</a-col>
							</a-row>
							<a-row>
								<a-col span="24">
									<h2 style="text-align: center;">{{item.title}}</h2>
								</a-col>
							</a-row>
							<a-row>
								<a-col span="20" offset="2">
									<p style="color: #000;">{{item.content}}</p>
								</a-col>
							</a-row>
						</uni-col>
					</uni-row>
				</view>
			</view>

			<view class="people-box">
				<uni-row :gutter="2" style="display: flex;align-items: center;">
					<uni-col :span="1">
						<image src="@/static/home/tips.png" style="width: 9px;height: 20px;"></image>
					</uni-col>
					<uni-col :span="10">
						<h1>加盟商图片展示</h1>
					</uni-col>
					<uni-col :span="12">
						<h2 style="text-align: right;cursor: pointer;"
							@click="$topage('/pages/article/article',{type:'631f82da7d77c300015e1a94',name:'机构介绍'},'new')">
							更多加盟商</h2>
					</uni-col>
					<uni-col :span="1">
						<uni-icons type="forward"></uni-icons>
					</uni-col>
				</uni-row>

				<uni-row style="display: flex;flex-flow: row wrap;justify-content: center">
					<uni-col :span="11" v-for="(item,index) in mechinsList">
						<view class="item-mechins" :class="{'marginTop20':index%2+1 == 1}">
							<image :src="item.image"></image>
							<a-row class="mechins-title-content">
								<a-col :span="12">
									<h3>{{item.title}}</h3>

								</a-col>
								<a-col :span="6">
									<image src="@/static/home/rightpoint.png" style="width:88px;height:10px"></image>
								</a-col>
							</a-row>
						</view>
					</uni-col>
				</uni-row>
			</view>


			<view class="activity-user-box">
				<a-row>
					<a-col :span="24" class="activity-user-number-bk">
						<view class="activity-user-info">
							<image src="/static/home/number.png"></image>
							<view class="info-box">
								<h1 style="text-align: center;color: #fff">{{activeUserCount}}</h1>
								<p>当前在线学习人数</p>
							</view>
						</view>
					</a-col>
					<a-col :span="24">
						<h3 style="text-align: center;">
							联创交规 21 省 1 直辖市 800 余所中心欢迎您的到来
						</h3>
					</a-col>
				</a-row>
				<uni-row :gutter="2" style="display: flex;justify-content: space-between;margin-top: 120rpx;">
					<uni-col :span="4" class="item-adv-v2" v-for="(item) in adv2list" :key="item.id">
						<a-row>
							<a-col span="12" offset="10" style="margin-top: 24rpx;">
								<image :src="'/static/home/'+item.img"></image>
							</a-col>
						</a-row>
						<a-row>
							<a-col span="24">
								<h2 style="text-align: center;">{{item.title}}</h2>
							</a-col>
						</a-row>
					</uni-col>
				</uni-row>
			</view>

			<view class="meclist-adv-box">
				<uni-row :gutter="2" style="display: flex;align-items: center;">
					<uni-col :span="1">
						<image src="@/static/home/tips.png" style="width: 9px;height: 20px;"></image>
					</uni-col>
					<uni-col :span="10">
						<h1>各地服务交规学习现场</h1>
					</uni-col>

				</uni-row>

				<scroll-view id="scrollBoxContent" ref="scrollBox" :scroll-x="true" @scroll="onScrollX"
					:scroll-left="leftIndex" style="width: 100%;height: 250px;white-space: nowrap;
		width: 100%;" :showScrollbar="false">
					<image class="image" v-for="(item) in mecAdvList" :src="item.image_src"></image>
				</scroll-view>

			</view>


			<view class="new-article-box">
				<uni-row :gutter="2" style="display: flex;align-items: center;">
					<uni-col :span="1">
						<image src="@/static/home/tips.png" style="width: 9px;height: 20px;"></image>
					</uni-col>
					<uni-col :span="10">
						<h1>新闻动态</h1>
					</uni-col>

				</uni-row>
				<a-row style="width:100%">


					<a-col v-for="(item) in article_list" :span="7">
						<image :src="item.image"></image>
					</a-col>
					
				</a-rwo>
			</view>
		</view>

	</a-layout-content>
</template>
<script>
	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted
	} from 'vue'

	const db = uniCloud.database()
	const cmd = db.command
	export default {
		data() {
			return {
				maxLeft: 0,
				leftIndex: 0,
				adv_video: '',
				adv2list: [{
						id: 1,
						img: 'p1.png',
						title: '科目一免费练习',
					},
					{
						id: 2,
						img: 'p2.png',
						title: '科目四免费练习',
					},
					{
						id: 3,
						img: 'p3.png',
						title: '恢复驾照免费练习',
					},
					{
						id: 4,
						img: 'p4.png',
						title: '资格证免费练习',
					},

				],
				advList: [{
						id: 1,
						img: 'v1.png',
						title: '行业始创者',
						content: '交规速成强化行业始创者；11年真实运营数据可查。'
					},
					{
						id: 2,
						img: 'v2.png',
						title: '在线人数庞大',
						content: '全国1000+网点即时学习人数实时显示，用数据说话。'
					},
					{
						id: 3,
						img: 'v3.png',
						title: '加盟网点多',
						content: '截至2017年全国加盟网点超过第二名至第十名的总和。'
					},
					{
						id: 4,
						img: 'v4.png',
						title: '整合系统平台',
						content: '依靠营销和辅导为主，软件为辅的整合系统平台。'
					}
				],
				bannerList: [],
				background: ['#fafafa', '#6e61fa', '#28cdfa'],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				showVideo: false,
				mechinsList: [],
				activeUserCount: 0,
				mecAdvList: [],
				timeTaskId: null,
				article_list: []
			}
		},
		onReady() {
			this.getBanner()
			this.getVideo()
			this.getMechinsList()
			this.getActiveUserNumber()
			this.getAllAdv2()
		},
		mounted() {
			// setInterval(()=>{
			// 	console.log(this.maxLeft)
			// 	// if(this.leftIndex>this.maxLeft){
			// 	// 	this.leftIndex = 0
			// 	// }else{
			// 	// 	this.leftIndex+=20
			// 	// }
			// },1000)
		},
		methods: {
			onScrollX(event) {
				//console.log(event)
			},

			async getNewArt() {
				const type = '6d85a2b962aaf2f30aee304238614502'
				const article = await db.collection('news-articles').where({
						category_id: '6d85a2b962aaf2f30aee304238614502',
						article_status: 1
					})
					.orderBy('publish_date', 'desc').limit(3).get()
				this.article_list = article.result.data

			},
			async getAllAdv2() {
				const resultList = await db.collection('adv-meclist').orderBy('sort', 'asc').get()
				this.mecAdvList = resultList.result.data
				this.maxLeft = 230 * this.mecAdvList.length
				console.log('maxleft', this.maxLeft)
				console.log(this.mecAdvList)
				const self = this

				this.timeTaskId = setInterval(() => {
					if (this.leftIndex > this.maxLeft) {
						this.leftIndex = 0
					} else {
						this.leftIndex += 50
					}
				}, 500)

			},
			async getActiveUserNumber() {
				const activeUserCount = await db.collection('action-user').count()
				this.activeUserCount = activeUserCount.result.total
				console.log('active user', activeUserCount.result.total)
			},
			async getMechinsList() {
				const mechinsList = await db.collection('news-articles')
					.where({
						category_id: '631f82da7d77c300015e1a94'
					})
					.field('_id,title,image')
					.get()
				this.mechinsList = mechinsList.result.data
				console.log(this.mechinsList)
			},
			async getVideo() {
				const videoResult = await db.collection('adv-video').limit(1).get()
				if (videoResult.result.data.length > 0) {
					this.adv_video = videoResult.result.data[0].video_src
				}
				console.log(videoResult.result.data[0])
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			async getBanner() {
				const bannerList = await db.collection('banner').orderBy('sort asc').get()
				if (bannerList.result.data.length > 0) {
					for (let s of bannerList.result.data) {
						this.bannerList.push(s)
					}
				}
			}
		},
		components: {

		},
		onLoad(params) {

		},
		onUnload() {

			if (this.timeTaskId) {
				clearInterval(this.timeTaskId)
			}
		},
		setup() {
			return {

			};
		}
	}
</script>
<style>
	@import url("./index.css");
</style>
